<template>
  <div class="setting-shop-page">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <div class="operationBar">
        <div class="label">店铺设置</div>
        <div>
          <el-button v-if="!isDisabled" @click="handleCancel">取消</el-button>
          <el-button v-else type="primary" @click="handleEdit">编辑</el-button>
          <el-button v-if="!isDisabled" :loading="btnLoading" type="primary" @click="updateStore">保存</el-button>
        </div>
      </div>
      <el-divider />
      <div class="h5">
        <div class="title">店铺信息</div>
      </div>
      <div class="shop-details">
        <el-form-item label="店铺logo">
          <el-upload
            :class="[{ 'avatar-uploader': !form.shopLogo }]"
            :headers="headers"
            :data="uploadObj"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :disabled="isDisabled"
          >
            <img
              v-if="form.shopLogo"
              :src="form.shopLogo"
              class="avatar"
              width="80"
              height="80"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="店铺名称">
          <el-input
            v-model="form.shopName"
            maxlength="20"
            :disabled="isDisabled"
          />
        </el-form-item>
        <el-form-item label="发货地址">
          <el-input
            v-model="form.shopAdress"
            maxlength="60"
            :disabled="isDisabled"
            :resize="`${isDisabled ? 'none' : 'vertical'}`"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="店铺简介">
          <el-input
            v-model="form.shopBrief"
            maxlength="50"
            :disabled="isDisabled"
            :resize="`${isDisabled ? 'none' : 'vertical'}`"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="注册手机号" prop="shopPhone">
          <el-input
            v-if="phoneSetting.shopPhoneShow"
            :model-value="hidden(form.shopPhone, 3, 4)"
            maxlength="11"
            :disabled="isDisabled"
          />
          <el-input
            v-else
            v-model="form.shopPhone"
            maxlength="11"
            :disabled="isDisabled"
          />
        </el-form-item>
      </div>
      <div class="h5">
        <div class="title">店铺认证</div>
      </div>
      <div class="shop-details" style="overflow: hidden; line-height: 40px">
        微信支付-商户认证
        <!-- <el-button type="primary" style="float:right" @click="approve">立即认证</el-button> -->
      </div>
      <div class="h5">
        <div class="title">退货地址</div>
      </div>
      <template v-if="form.shopReturn">
        <div class="shop-details">
          <el-form-item label="地址">
            <el-input
              v-model="form.shopReturn.returnAdress"
              maxlength="60"
              :disabled="isDisabled"
            />
          </el-form-item>
          <el-form-item label="联系人">
            <el-input
              v-model="form.shopReturn.returnPerson"
              maxlength="20"
              :disabled="isDisabled"
            />
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input
              v-if="phoneSetting.returnPhoneShow"
              :model-value="hidden(form.shopReturn.returnPhone, 3, 4)"
              maxlength="11"
              :disabled="isDisabled"
            />
            <el-input
              v-else
              ref="returnPhoneCls"
              v-model="form.shopReturn.returnPhone"
              maxlength="11"
              :disabled="isDisabled"
            />
          </el-form-item>
        </div>
      </template>
    </el-form>
  </div>
</template>

<script setup>
import { defineComponent, onBeforeMount, reactive, ref, shallowRef } from 'vue'
import { shopSysGetById, shopSysUpdate } from '@/api/shopSys'
import { uploadUrl } from '@/utils/request'
import { getToken } from '@/utils/auth'

const PhoneRule = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/

defineComponent({
  name: 'ShopInfoPage'
})

let isDisabled = shallowRef(true);

const ruleFormRef = ref();
let btnLoading = shallowRef(false)
let form = ref({})
const rules = {
  shopPhone: [
    { required: true, message: '请输入注册手机号', trigger: 'blur' },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: '目前只支持中国大陆的手机号码',
    },
  ],
  returnPhone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: '目前只支持中国大陆的手机号码',
    },
  ],
}
let cacheForm = shallowRef('')
let phoneSetting = reactive({
  shopPhoneShow: true,
  returnPhoneShow: true,
})


const headers = {
  'Authorization': getToken(),
}
let uploadObj = reactive({
  folderId: 1
})


function getStoreDetails () {
  shopSysGetById({}).then(res => {
    if (res.code === '') {
      form.value = res.data
      if (!form.value.shopReturn) {
        form.value.shopReturn = {}
      }
    }
  })
}

function handleEdit () {
  isDisabled.value = !isDisabled.value
  cacheForm.value = JSON.stringify(form.value)
  phoneSetting.shopPhoneShow = false
  phoneSetting.returnPhoneShow = false
}
function handleCancel () {
  isDisabled.value = !isDisabled.value
  form.value = JSON.parse(cacheForm.value)
  phoneSetting.shopPhoneShow = true
  phoneSetting.returnPhoneShow = true
}
function updateStore () {
  ruleFormRef.value.validate((valid) => {
    if (!PhoneRule.test(form.value.shopReturn.returnPhone)) {
      return ElMessage.warning('请输入正确联系电话')
    }
    if (valid) {
      btnLoading.value = true
      shopSysUpdate(form.value).then((res) => {
        if (res.code === '') {
          getStoreDetails()
          isDisabled.value = true
          phoneSetting.returnPhoneShow = true
          phoneSetting.shopPhoneShow = true
          ElMessage.success('修改成功')
        }
      }).finally(() => {
        btnLoading.value = false
      })
    }
  })
}
function handleAvatarSuccess (response) {
  const { url } = response.data
  form.value.shopLogo = url
}
// function approve () {
//   // this.$router.push({ path: '/setting/shop/wechat-approve' })
// }
// 中间部分
function hidden (str, frontLen, endLen) {
  if (!str) {
    return // 如果值为空，直接return
  }
  let endLenData = 0
  if (str && str.length !== 2) {
    endLenData = endLen
  }
  const len = str.length - frontLen - endLenData
  let xing = ''
  for (let i = 0; i < len; i++) {
    xing += '*'
  }
  return (
    str.substring(0, frontLen) +
        xing +
        str.substring(str.length - endLenData)
  )
}

onBeforeMount(() => {
  getStoreDetails()
})
</script>

<style lang="scss" scoped>
.setting-shop-page {
  margin-top: 20px;
  min-height: calc(100% - 20px);
  background-color: #ffffff;
  padding: 20px;
  .operationBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .label {
      font-size: 24px;
    }
    .el-button {
      height: 38px;
    }
  }
  :deep(.el-form-item__label) {
    font-weight: bold;
  }
  .h5 {
    max-width: 1000px;
    display: flex;
    font-size: 20px;
    margin: 20px auto;
    padding-left: 10px;
    padding-right: 300px;
    flex-wrap: 800;
    .title {
      flex: 1;
    }
  }
  .shop-details {
    max-width: 800px;
    margin: auto;
    .el-input,
    .el-textarea {
      width: 380px;
      :deep(.el-input__inner) {
        height: 38px;
      }
    }
    // 不能编辑样式
    .el-input.is-disabled .el-input__inner,
    .el-textarea.is-disabled .el-textarea__inner {
      cursor: inherit;
      background-color: #f8f8f8;
      border: 1px solid #f8f8f8;
      color: #606266;
    }
  }
  .avatar-uploader {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    line-height: 80px;
    text-align: center;
    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
      }
    }
  }
}
</style>
